
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin1"></i>
                    <div class="name">weixin</div>
                    <div class="fontclass">.icon-weixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinrituijian"></i>
                    <div class="name">今日推荐</div>
                    <div class="fontclass">.icon-jinrituijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin2"></i>
                    <div class="name">weixin2</div>
                    <div class="fontclass">.icon-weixin2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sina"></i>
                    <div class="name">sina</div>
                    <div class="fontclass">.icon-sina</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin3"></i>
                    <div class="name">weixin</div>
                    <div class="fontclass">.icon-weixin3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msg"></i>
                    <div class="name">msg</div>
                    <div class="fontclass">.icon-msg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location"></i>
                    <div class="name">位置</div>
                    <div class="fontclass">.icon-location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-modify"></i>
                    <div class="name">修改</div>
                    <div class="fontclass">.icon-modify</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuyan"></i>
                    <div class="name">留言</div>
                    <div class="fontclass">.icon-liuyan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuliang"></i>
                    <div class="name">2流量</div>
                    <div class="fontclass">.icon-liuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuliangjiance"></i>
                    <div class="name">1流量监测</div>
                    <div class="fontclass">.icon-liuliangjiance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishijilu"></i>
                    <div class="name">3历史记录</div>
                    <div class="fontclass">.icon-lishijilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lujingchaxun"></i>
                    <div class="name">5路径查询</div>
                    <div class="fontclass">.icon-lujingchaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lujingfenxi"></i>
                    <div class="name">4路径分析</div>
                    <div class="fontclass">.icon-lujingfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yundongguiji"></i>
                    <div class="name">6运动轨迹</div>
                    <div class="fontclass">.icon-yundongguiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishijiance"></i>
                    <div class="name">7实时监测</div>
                    <div class="fontclass">.icon-shishijiance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxihuoqu"></i>
                    <div class="name">2信息获取</div>
                    <div class="fontclass">.icon-xinxihuoqu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjifenxi"></i>
                    <div class="name">1统计分析</div>
                    <div class="fontclass">.icon-tongjifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuliangtongji"></i>
                    <div class="name">4流量统计</div>
                    <div class="fontclass">.icon-liuliangtongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qushi"></i>
                    <div class="name">3趋势</div>
                    <div class="fontclass">.icon-qushi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjibiaodan"></i>
                    <div class="name">5统计表单</div>
                    <div class="fontclass">.icon-tongjibiaodan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chakou"></i>
                    <div class="name">岔口22</div>
                    <div class="fontclass">.icon-chakou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhishu"></i>
                    <div class="name">6指数</div>
                    <div class="fontclass">.icon-zhishu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjibaobiao"></i>
                    <div class="name">7统计报表</div>
                    <div class="fontclass">.icon-tongjibaobiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-luxian"></i>
                    <div class="name">路线11</div>
                    <div class="fontclass">.icon-luxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuliangtongji1"></i>
                    <div class="name">流量统计23</div>
                    <div class="fontclass">.icon-liuliangtongji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-luxianchaxun"></i>
                    <div class="name">路线查询</div>
                    <div class="fontclass">.icon-luxianchaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renshutongji"></i>
                    <div class="name">人数统计</div>
                    <div class="fontclass">.icon-renshutongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongji"></i>
                    <div class="name">统计33</div>
                    <div class="fontclass">.icon-tongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comment"></i>
                    <div class="name">comment</div>
                    <div class="fontclass">.icon-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qzone"></i>
                    <div class="name">qzone</div>
                    <div class="fontclass">.icon-qzone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-category"></i>
                    <div class="name">category</div>
                    <div class="fontclass">.icon-category</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">qq</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mail"></i>
                    <div class="name">mail</div>
                    <div class="fontclass">.icon-mail</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-single"></i>
                    <div class="name">single</div>
                    <div class="fontclass">.icon-single</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tag"></i>
                    <div class="name">tag</div>
                    <div class="fontclass">.icon-tag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-top"></i>
                    <div class="name">top</div>
                    <div class="fontclass">.icon-top</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-view"></i>
                    <div class="name">view</div>
                    <div class="fontclass">.icon-view</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin4"></i>
                    <div class="name">weixin</div>
                    <div class="fontclass">.icon-weixin4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibo"></i>
                    <div class="name">weibo</div>
                    <div class="fontclass">.icon-weibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud"></i>
                    <div class="name">cloud</div>
                    <div class="fontclass">.icon-cloud</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-earth"></i>
                    <div class="name">earth</div>
                    <div class="fontclass">.icon-earth</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collect"></i>
                    <div class="name">collect</div>
                    <div class="fontclass">.icon-collect</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pengyou"></i>
                    <div class="name">pengyou</div>
                    <div class="fontclass">.icon-pengyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan"></i>
                    <div class="name">zan</div>
                    <div class="fontclass">.icon-zan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-android"></i>
                    <div class="name">android</div>
                    <div class="fontclass">.icon-android</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-apple"></i>
                    <div class="name">apple</div>
                    <div class="fontclass">.icon-apple</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-heart"></i>
                    <div class="name">heart</div>
                    <div class="fontclass">.icon-heart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link"></i>
                    <div class="name">link</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feed"></i>
                    <div class="name">feed</div>
                    <div class="fontclass">.icon-feed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liaotian"></i>
                    <div class="name">聊天</div>
                    <div class="fontclass">.icon-liaotian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fabu"></i>
                    <div class="name">发布1</div>
                    <div class="fontclass">.icon-fabu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msg-system"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-msg-system</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yunying"></i>
                    <div class="name">运营</div>
                    <div class="fontclass">.icon-yunying</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anzhuo"></i>
                    <div class="name">安卓</div>
                    <div class="fontclass">.icon-anzhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibo1"></i>
                    <div class="name">微博</div>
                    <div class="fontclass">.icon-weibo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin5"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zixun"></i>
                    <div class="name">咨询</div>
                    <div class="fontclass">.icon-zixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-lianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-baidu"></i>
                    <div class="name">default-baidu</div>
                    <div class="fontclass">.icon-default-baidu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-douban"></i>
                    <div class="name">default-douban</div>
                    <div class="fontclass">.icon-default-douban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-Friendscircle"></i>
                    <div class="name">default-Friends circle</div>
                    <div class="fontclass">.icon-default-Friendscircle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-Weibo"></i>
                    <div class="name">default-Weibo</div>
                    <div class="fontclass">.icon-default-Weibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-WeChat"></i>
                    <div class="name">default-WeChat</div>
                    <div class="fontclass">.icon-default-WeChat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-Happynetwork"></i>
                    <div class="name">default-Happy network</div>
                    <div class="fontclass">.icon-default-Happynetwork</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-TencentWeibo"></i>
                    <div class="name">default-Tencent Weibo</div>
                    <div class="fontclass">.icon-default-TencentWeibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-Mchat"></i>
                    <div class="name">default-M chat</div>
                    <div class="fontclass">.icon-default-Mchat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-QQspace"></i>
                    <div class="name">default-QQ space</div>
                    <div class="fontclass">.icon-default-QQspace</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-Taobao"></i>
                    <div class="name">default-Taobao</div>
                    <div class="fontclass">.icon-default-Taobao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default-QQ"></i>
                    <div class="name">default-QQ</div>
                    <div class="fontclass">.icon-default-QQ</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daima"></i>
                    <div class="name">代码</div>
                    <div class="fontclass">.icon-daima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanzhengmashibie"></i>
                    <div class="name">验证码识别</div>
                    <div class="fontclass">.icon-yanzhengmashibie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dongtaixinxizhuaqu"></i>
                    <div class="name">动态信息抓取</div>
                    <div class="fontclass">.icon-dongtaixinxizhuaqu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duochucunzhichi"></i>
                    <div class="name">多储存支持</div>
                    <div class="fontclass">.icon-duochucunzhichi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duozhongjiexifangan"></i>
                    <div class="name">多种解析方案</div>
                    <div class="fontclass">.icon-duozhongjiexifangan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjiequzhong"></i>
                    <div class="name">链接去重</div>
                    <div class="fontclass">.icon-lianjiequzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kepeizhihuabaojingfuwu"></i>
                    <div class="name">可配置化报警服务</div>
                    <div class="fontclass">.icon-kepeizhihuabaojingfuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yizhanshipeizhi"></i>
                    <div class="name">一站式配置</div>
                    <div class="fontclass">.icon-yizhanshipeizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenduheguangdu"></i>
                    <div class="name">深度和广度</div>
                    <div class="fontclass">.icon-shenduheguangdu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuanguanli"></i>
                    <div class="name">资源管理</div>
                    <div class="fontclass">.icon-ziyuanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dashujucunchu"></i>
                    <div class="name">大数据存储</div>
                    <div class="fontclass">.icon-dashujucunchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dashujukaifataojian"></i>
                    <div class="name">大数据开发套件</div>
                    <div class="fontclass">.icon-dashujukaifataojian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huaxiangfenxi"></i>
                    <div class="name">画像分析</div>
                    <div class="fontclass">.icon-huaxiangfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiqixuexi"></i>
                    <div class="name">机器学习</div>
                    <div class="fontclass">.icon-jiqixuexi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuaisuBI"></i>
                    <div class="name">快速BI</div>
                    <div class="fontclass">.icon-kuaisuBI</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-keshihuashujuETL"></i>
                    <div class="name">可视化数据ETL</div>
                    <div class="fontclass">.icon-keshihuashujuETL</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lixianpijisuan"></i>
                    <div class="name">离线批计算</div>
                    <div class="fontclass">.icon-lixianpijisuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiyetupu"></i>
                    <div class="name">企业图谱</div>
                    <div class="fontclass">.icon-qiyetupu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishiliujisuan"></i>
                    <div class="name">实时流计算</div>
                    <div class="fontclass">.icon-shishiliujisuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujuduoweiducube"></i>
                    <div class="name">数据多维度cube</div>
                    <div class="fontclass">.icon-shujuduoweiducube</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuxingtuxiangchuli"></i>
                    <div class="name">图形图像处理</div>
                    <div class="fontclass">.icon-tuxingtuxiangchuli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuceyinqing"></i>
                    <div class="name">预测引擎</div>
                    <div class="fontclass">.icon-yuceyinqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziranyuyanchuli"></i>
                    <div class="name">自然语言处理</div>
                    <div class="fontclass">.icon-ziranyuyanchuli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujujicheng"></i>
                    <div class="name">数据集成</div>
                    <div class="fontclass">.icon-shujujicheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhinengyuyinjiaohu"></i>
                    <div class="name">智能语音交互</div>
                    <div class="fontclass">.icon-zhinengyuyinjiaohu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingbaowajue"></i>
                    <div class="name">情报挖掘</div>
                    <div class="fontclass">.icon-qingbaowajue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Kxiantu"></i>
                    <div class="name">K线图</div>
                    <div class="fontclass">.icon-Kxiantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxi"></i>
                    <div class="name">分析</div>
                    <div class="fontclass">.icon-fenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多…</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaohu"></i>
                    <div class="name">交互</div>
                    <div class="fontclass">.icon-jiaohu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leidatu"></i>
                    <div class="name">雷达图</div>
                    <div class="fontclass">.icon-leidatu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoweidu"></i>
                    <div class="name">多维度</div>
                    <div class="fontclass">.icon-duoweidu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sandiantu"></i>
                    <div class="name">散点图</div>
                    <div class="fontclass">.icon-sandiantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujushitu"></i>
                    <div class="name">数据视图</div>
                    <div class="fontclass">.icon-shujushitu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhexiantu"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.icon-zhexiantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__erweima"></i>
                    <div class="name">web__二维码</div>
                    <div class="fontclass">.icon-web__erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__kaifazhezhuanyong"></i>
                    <div class="name">web__开发者专用</div>
                    <div class="fontclass">.icon-web__kaifazhezhuanyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__youxiangrenzheng"></i>
                    <div class="name">web__邮箱认证</div>
                    <div class="fontclass">.icon-web__youxiangrenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web_tengxunweibo"></i>
                    <div class="name">web_腾讯微博</div>
                    <div class="fontclass">.icon-web_tengxunweibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__shoujirenzheng"></i>
                    <div class="name">web__手机认证</div>
                    <div class="fontclass">.icon-web__shoujirenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__zanwujilu"></i>
                    <div class="name">web__暂无记录</div>
                    <div class="fontclass">.icon-web__zanwujilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__bitebijiaoyi"></i>
                    <div class="name">web__比特币交易</div>
                    <div class="fontclass">.icon-web__bitebijiaoyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__huoquhangqing"></i>
                    <div class="name">web__获取行情</div>
                    <div class="fontclass">.icon-web__huoquhangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__jiantou_you"></i>
                    <div class="name">web__箭头_右</div>
                    <div class="fontclass">.icon-web__jiantou_you</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web_xinlangweibo"></i>
                    <div class="name">web_新浪微博</div>
                    <div class="fontclass">.icon-web_xinlangweibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__kuaisuduijie"></i>
                    <div class="name">web__快速对接</div>
                    <div class="fontclass">.icon-web__kuaisuduijie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__falvshengming"></i>
                    <div class="name">web__法律声明</div>
                    <div class="fontclass">.icon-web__falvshengming</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__shimingrenzheng"></i>
                    <div class="name">web__实名认证</div>
                    <div class="fontclass">.icon-web__shimingrenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__shezhi"></i>
                    <div class="name">web__设置</div>
                    <div class="fontclass">.icon-web__shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__xiaoxiguanli"></i>
                    <div class="name">web__消息管理</div>
                    <div class="fontclass">.icon-web__xiaoxiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__yiwen"></i>
                    <div class="name">web__疑问</div>
                    <div class="fontclass">.icon-web__yiwen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-web__ip"></i>
                    <div class="name">web__ip</div>
                    <div class="fontclass">.icon-web__ip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-2"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eye"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-eye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wechat"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-wechat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bulletin"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-bulletin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-accessory"></i>
                    <div class="name">accessory</div>
                    <div class="fontclass">.icon-accessory</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-empty"></i>
                    <div class="name">empty</div>
                    <div class="fontclass">.icon-empty</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feedback"></i>
                    <div class="name">feedback</div>
                    <div class="fontclass">.icon-feedback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-flag"></i>
                    <div class="name">flag</div>
                    <div class="fontclass">.icon-flag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-flip"></i>
                    <div class="name">flip</div>
                    <div class="fontclass">.icon-flip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-group"></i>
                    <div class="name">group</div>
                    <div class="fontclass">.icon-group</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-homepage"></i>
                    <div class="name">homepage</div>
                    <div class="fontclass">.icon-homepage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-interactive"></i>
                    <div class="name">interactive</div>
                    <div class="fontclass">.icon-interactive</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-label"></i>
                    <div class="name">label</div>
                    <div class="fontclass">.icon-label</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-like"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-live"></i>
                    <div class="name">live</div>
                    <div class="fontclass">.icon-live</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">lock</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mail1"></i>
                    <div class="name">mail</div>
                    <div class="fontclass">.icon-mail1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mine"></i>
                    <div class="name">mine</div>
                    <div class="fontclass">.icon-mine</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mobilephone"></i>
                    <div class="name">mobilephone</div>
                    <div class="fontclass">.icon-mobilephone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-narrow"></i>
                    <div class="name">narrow</div>
                    <div class="fontclass">.icon-narrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-order"></i>
                    <div class="name">order</div>
                    <div class="fontclass">.icon-order</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-people"></i>
                    <div class="name">people</div>
                    <div class="fontclass">.icon-people</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-picture"></i>
                    <div class="name">picture</div>
                    <div class="fontclass">.icon-picture</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play"></i>
                    <div class="name">play</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qrcode"></i>
                    <div class="name">qrcode</div>
                    <div class="fontclass">.icon-qrcode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redpacket"></i>
                    <div class="name">redpacket</div>
                    <div class="fontclass">.icon-redpacket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remind"></i>
                    <div class="name">remind</div>
                    <div class="fontclass">.icon-remind</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-scan"></i>
                    <div class="name">scan</div>
                    <div class="fontclass">.icon-scan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-select"></i>
                    <div class="name">select</div>
                    <div class="fontclass">.icon-select</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-send"></i>
                    <div class="name">send</div>
                    <div class="fontclass">.icon-send</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-service"></i>
                    <div class="name">service</div>
                    <div class="fontclass">.icon-service</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-setup"></i>
                    <div class="name">setup</div>
                    <div class="fontclass">.icon-setup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share"></i>
                    <div class="name">share</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stealth"></i>
                    <div class="name">stealth</div>
                    <div class="fontclass">.icon-stealth</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-success"></i>
                    <div class="name">success</div>
                    <div class="fontclass">.icon-success</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-systemprompt"></i>
                    <div class="name">systemprompt</div>
                    <div class="fontclass">.icon-systemprompt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-text"></i>
                    <div class="name">text</div>
                    <div class="fontclass">.icon-text</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time1"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-translation"></i>
                    <div class="name">translation</div>
                    <div class="fontclass">.icon-translation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trash"></i>
                    <div class="name">trash</div>
                    <div class="fontclass">.icon-trash</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video"></i>
                    <div class="name">video</div>
                    <div class="fontclass">.icon-video</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search1"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-publishgoods_fill"></i>
                    <div class="name">publish goods_fill</div>
                    <div class="fontclass">.icon-publishgoods_fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shop_fill"></i>
                    <div class="name">shop_fill</div>
                    <div class="fontclass">.icon-shop_fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-transaction_fill"></i>
                    <div class="name">transaction_fill</div>
                    <div class="fontclass">.icon-transaction_fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-packup"></i>
                    <div class="name">packup</div>
                    <div class="fontclass">.icon-packup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unfold"></i>
                    <div class="name">unfold</div>
                    <div class="fontclass">.icon-unfold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangwang"></i>
                    <div class="name">wangwang_fill</div>
                    <div class="fontclass">.icon-wangwang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-linux"></i>
                    <div class="name">linux</div>
                    <div class="fontclass">.icon-linux</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mac"></i>
                    <div class="name">mac</div>
                    <div class="fontclass">.icon-mac</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-windows"></i>
                    <div class="name">windows</div>
                    <div class="fontclass">.icon-windows</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shake"></i>
                    <div class="name">shake</div>
                    <div class="fontclass">.icon-shake</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-decoration_fill"></i>
                    <div class="name">decoration_fill</div>
                    <div class="fontclass">.icon-decoration_fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fire"></i>
                    <div class="name">火</div>
                    <div class="fontclass">.icon-fire</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menu2"></i>
                    <div class="name">目录、导航</div>
                    <div class="fontclass">.icon-menu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper"></i>
                    <div class="name">文档、文章、document</div>
                    <div class="fontclass">.icon-paper</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-editor"></i>
                    <div class="name">编辑、editor</div>
                    <div class="fontclass">.icon-editor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link1"></i>
                    <div class="name">链接、link</div>
                    <div class="fontclass">.icon-link1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share1"></i>
                    <div class="name">分享、share</div>
                    <div class="fontclass">.icon-share1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-schedule"></i>
                    <div class="name">时间、time</div>
                    <div class="fontclass">.icon-schedule</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qr-code"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-qr-code</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-speechbubble"></i>
                    <div class="name">评论、聊天</div>
                    <div class="fontclass">.icon-speechbubble</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-localoffer"></i>
                    <div class="name">书签、标签</div>
                    <div class="fontclass">.icon-localoffer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nav-search"></i>
                    <div class="name">搜索、search</div>
                    <div class="fontclass">.icon-nav-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoxian"></i>
                    <div class="name">表现</div>
                    <div class="fontclass">.icon-biaoxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian1"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-PC"></i>
                    <div class="name">PC</div>
                    <div class="fontclass">.icon-PC</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit1"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-point"></i>
                    <div class="name">知识</div>
                    <div class="fontclass">.icon-point</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share2"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-share2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanyu"></i>
                    <div class="name">关于</div>
                    <div class="fontclass">.icon-guanyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qr-code1"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-qr-code1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-"></i>
                    <div class="name">多用户</div>
                    <div class="fontclass">.icon-icon-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-1"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-icon-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-3"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-icon-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-4"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-icon-4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiazai"></i>
                    <div class="name">037下载</div>
                    <div class="fontclass">.icon-xiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei"></i>
                    <div class="name">046定位</div>
                    <div class="fontclass">.icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remen"></i>
                    <div class="name">080热门</div>
                    <div class="fontclass">.icon-remen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hulianwang"></i>
                    <div class="name">互联网</div>
                    <div class="fontclass">.icon-hulianwang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huo"></i>
                    <div class="name">火</div>
                    <div class="fontclass">.icon-huo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan1"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifeiji"></i>
                    <div class="name">纸飞机</div>
                    <div class="fontclass">.icon-zhifeiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diannao"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-diannao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongju"></i>
                    <div class="name">工具</div>
                    <div class="fontclass">.icon-gongju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxi"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-xinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinle"></i>
                    <div class="name">音乐</div>
                    <div class="fontclass">.icon-yinle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuedu"></i>
                    <div class="name">阅读</div>
                    <div class="fontclass">.icon-yuedu</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
